  <template>
  <div id="Content-page">
    <div class="content-main">
      <el-button id="new-button" @click="createEmployeeAccount">创建员工账号</el-button>
      <div class="search-employee">
        <div class="employee-info">
          <span>姓名</span>
          <el-input v-model="queryEmloyee.employeeName" placeholder="请输入姓名"></el-input>
        </div>
        <div class="employee-info">
          <span>工号</span>
          <el-input v-model="queryEmloyee.employeeId" placeholder="请输入工号"></el-input>
        </div>
        <div class="employee-info">
          <span>手机号</span>
          <el-input
            v-model="queryEmloyee.employeePhoneNumber"
            placeholder="请输入手机号"
          ></el-input>
        </div>
      </div>
      <!-- 查询重置 -->
      <div>
        <el-button id="new-button" @click="buttonQueryEmloyee">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </div>
      <!-- 表格数据 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="employeeId" label="员工工号" width="180" align="center" />
        <el-table-column prop="employeeName" label="姓名" width="180" align="center" />
        <el-table-column prop="employeePhoneNumber" label="手机号" align="center" />
        <el-table-column label="职位" align="center">
          <template #default="{ row }">
            <p>{{ employeeRoleApi(row.employeeRole) }}</p>
          </template>
        </el-table-column>
        <el-table-column label="性别" align="center">
          <template #default="{ row }">
            <p>{{ row.employeeGender === "1" ? "男" : "女" }}</p>
          </template>
        </el-table-column>
        <el-table-column label="婚姻状态" align="center">
          <template #default="{ row }">
            <p>{{ maritalStatusApi(row.maritalStatus) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="birthdays" label="生日" align="center" />
        <el-table-column prop="hireDate" label="入职日期" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-text
              type="primary"
              @click="
                blockUser(scope.row._id, scope.row.isBlocked, scope.$index, scope.row.employeeName)
              "
              >{{ scope.row.isBlocked ? "移除黑名单" : "拉黑" }}</el-text
            >
          </template>
        </el-table-column>
      </el-table>
      <!--分页 -->
      <el-pagination
        class="pager-next"
        background
        layout="prev, pager, next"
        :total="totalQuantity"
        hide-on-single-page
        :current-page="queryEmloyee.page"
        @current-change="currentChange"
      >
      </el-pagination>
    </div>
  </div>
  <CreateEmployeeAccount ref="openDialog"></CreateEmployeeAccount>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { employeeListApi, blockUserAccountApi, unblockUserApi } from "../../api/api";
import type { employeeListRes } from "../../types/index";
import { employeeRoleApi, maritalStatusApi } from "../../api/other";
import { ElMessageBox } from "element-plus";
// 引入创建员工账号的子组件
import CreateEmployeeAccount from "@/page/staff-management/create-employee-account.vue";
//#region
// 请求员工数据
onMounted(async () => {
  const res = await employeeListApi();
  // console.log(res);
  tableData.value = res.data.res;
  totalQuantity.value = res.data.total;
});
// 存储员工表格数据
const tableData = ref<employeeListRes[]>([]);
// 数据总条数
const totalQuantity = ref(0);
// 存储查询条件
const queryEmloyee = reactive({
  employeeName: "",
  employeeId: "",
  employeePhoneNumber: "",
  page: 1,
});
// 分页
function currentChange(value: number) {
  queryEmloyee.page = value;
  queryEmloyeeData();
}
// 查询订单
function buttonQueryEmloyee() {
  queryEmloyee.page = 1;
  queryEmloyeeData();
}
// 重置
function resetQuery() {
  queryEmloyee.page = 1;
  queryEmloyee.employeeId = "";
  queryEmloyee.employeeName = "";
  queryEmloyee.employeePhoneNumber = "";
  queryEmloyeeData();
}

// 公用查询订单返回结果
async function queryEmloyeeData() {
  const res = await employeeListApi({
    employeeName: queryEmloyee.employeeName,
    employeeId: queryEmloyee.employeeId,
    employeePhoneNumber: queryEmloyee.employeePhoneNumber,
    page: queryEmloyee.page,
  });
  tableData.value = res.data.res;
  totalQuantity.value = res.data.total;
}
//#endregion
// 拉黑员工
function blockUser(_id: string, isBlocked: boolean, index: number, employeeName: string) {
  ElMessageBox.confirm(
    `确定将${employeeName}${isBlocked ? "移除黑名单吗？" : "拉进黑名单吗？"}`,
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).then(async () => {
    if (isBlocked) {
      // 移除
      await unblockUserApi({ userId: _id });
      tableData.value[index].isBlocked = false;
    } else {
      await blockUserAccountApi({ userId: _id });
      tableData.value[index].isBlocked = true;
    }
  });
}
// 调用子组件打开弹窗：创建员工账号
const openDialog = ref();
function createEmployeeAccount() {
  openDialog.value.open();
}
</script>

<style scoped>
.search-employee {
  display: flex;
  align-items: center;
  margin: 15px 0;
}
.employee-info {
  display: flex;
  align-items: center;
  padding-right: 15px;
}
.employee-info >>> .el-input {
  flex: 1;
}
.employee-info span {
  padding-right: 15px;
}
.el-text {
  cursor: pointer;
}
</style>
